<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
  一、  当v-if和v-for出现在一起时，v-for优先级更高。也就是说，会先遍历，再判断条件。
  二、  v-else 指令来表示 v-if 的“else 块”：没有参数
         v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别
         v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：
  三、    v-show 只是简单地切换元素的 CSS 属性 display
           v-if,是直接删除所在标签及其子标签
     -->
</head>
<body>
    <div id="app">
        <button @click="Vif = !Vif">点击切换</button>
       <h1 v-if="Vif">
           你好啊
       </h1>
        <ul>
            <li v-for="(user,index) in users" v-if="user.gender === '女'">
                {{index}} - {{user.name}} : {{user.gender}} : {{user.age}}
            </li>
            <li>
                <div v-if="Vif==true">
                   "你可以看见我"
                </div>
                <div v-else>
                  "你没有那个福气"
                </div>
            </li>
            <li>
                <div v-if="type === 'A'">
                    A
                </div>
                <div v-else-if="type === 'B'">
                    B
                </div>
                <div v-else-if="type === 'C'">
                    C
                </div>
                <div v-else>
                    Not A/B/C
                </div>
            </li>
            <li>
                <div >
                    <!--事件中直接写js片段-->
                    <button @click="show = !show">点击切换</button><br/>
                    <h1 v-show="show">
                        我是v-show
                    </h1>
                </div>
            </li>
        </ul>
    </div>
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            show:true,
            Vif:true,
            type:"A",
            users:[
                {name:'柳岩', gender:'女', age: 21},
                {name:'虎哥', gender:'男', age: 30},
                {name:'范冰冰', gender:'女', age: 24},
                {name:'刘亦菲', gender:'女', age: 18},
                {name:'古力娜扎', gender:'女', age: 25}
            ]
        }
    })
</script>
</html>